<template>
	<view class="uCenter">
		<view class="uCenterTop">
			<view class="uCenterTop_avatar">
				<div class="lt">
					<u-avatar src="userMeData.icon" shape="circle" size="75"></u-avatar>
					<view class="cot">
						<!-- <view class="font35" v-html="userMeData"></view> -->
						<view class="font23">{{userMeData.introduce}}</view>
						<u-icon name="man" color="#FC5BB0" size="20"></u-icon>
					</view>
				</div>
				<div class="rt">
					<image src="@/static/images/my_ico_setup@2x.png" mode="widthFix" class="setup" @click="btn()"></image>
					<image src="@/static/images/nav_ico_xiaoxi@2x.png" class="msg" mode="widthFix"></image>
				</div>
			</view>
			<view class="uCenterTop_box">
				<view>
					<view class="font42">{{userMeData.fans}}</view>
					<view class="font27">粉丝</view>
				</view>
				<view>
					<view class="font42">{{userMeData.followee}}</view>
					<view class="font27">关注</view>
				</view>
				<!-- <view>
					<view class="font42">{{userMeData.introduce}}</view>
					<view class="font27">赞</view>
				</view> -->
			</view>
			<view class="signIn">
				<div class="lt">
					<view class="font34" v-if="count==null">签到<text class="font38">领好礼</text></view>
					<view class="font34" v-else>连续签到<text class="font38">{{count}}</text>次</view>
					<view class="font23">连续签到7天领神秘礼品</view>
				</div>
				<div class="rt"><button type="default" @click="sign()" id="sign" v-html="qiandao"></button></div>
			</view>
		</view>
		
		<view class="uCenterBom">
			<view class="uCenterBom_tab">
				<text :class="tabCur==0?'active':''" @tap="clickCtTab(0)">笔记</text>
				<text :class="tabCur==1?'active':''" @tap="clickCtTab(1)">动态</text>
			</view>
			
			<view class="uCenterBom_cont" v-if="tabCur===0">
				<view class="list" v-for="(item,index) in myNotes" :key="index">
					<!-- <image :src="item.images" mode="widthFix" class="imgs"></image> -->
					<u-image :src="item.images | fg" :lazy-load="true" radius="0" width="100%"></u-image>
					<view class="conts">
						<view class="font23">
							{{ item.content }}
						</view>
						<view class="sec">
							<view class="lt">
								<u-avatar :src="item.liked" shape="circle" size="24"></u-avatar>
								<text>{{ item.title }}</text></view>
							<view class="rt" @click.stop="changeSa(item.id)">
								<uni-icons color="#ff6600" :type="isLike ? 'heart-filled':'heart'" size="14"></uni-icons>
								<text>{{ item.liked }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="tabCur===1">
				<!-- 动态 dynamic-->
				<dynamic :dys='dys'></dynamic>
				<u-loadmore :status="status" />
			</view>
		</view>
		
	</view>
</template>

<script>
	import dynamic from '@/components/dynamic.vue'
	export default {
		data() {
			return {
				isLike:false,
				tabCur:0,
				userMeData:{},
				qiandao:'签到',
				myNotes:[],
				count:null,
				current:1,
				dys:[],
				lastId:'',//上一次查询的最小时间戳
				offset:'',//偏移量,
				pageSize:4,
				currentPage:0,
				status: 'loadmore'
			}
		},
		onLoad() {
			// 获取当前登录的用户
			this.userMe()
			this.blogOfMe()
			// 我关注的好友的笔记 == 动态
			this.blogOfFollow()
		},
		filters:{
			fg(val){
				let img = val.split(',');
				return img[0]
			}
		},
		methods: {
			changeSa(id){
				this.likeTab(id);
			},
			likeTab(id){
				uni.request({
					url:'/blog/like/'+id,
					method:'PUT',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log("点赞:",obj)
						if(obj.data.success){
							uni.showLoading({
								title:'关注成功'
							})
							this.isLike = true
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 1000);
						
					}
				})
			},
			clickCtTab(num){
				this.tabCur = num;
			},
			btn(){
				uni.navigateTo({
					url:'/pages/setup/setup'
				})
			},
			userMe(){
				uni.request({
					url:'/user/me',
					method:'get',
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						console.log('用户信息',obj)
						this.userMeData="功能未完善"
						if(obj.statusCode == 200){
							this.userMeData = obj.data.data;
						}
					}
				})
			},
			sign(){
				uni.request({
					url:'/user/sign',
					method:'post',
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						if(this.count == null){
							if(obj.data.success){
								uni.showLoading({
									title: '签到成功'
								})
								setTimeout(() => {
									uni.hideLoading();
									this.qiandao='已签到'
								}, 2000);
								this.signCount()
							}else{
								uni.showLoading({
									title: '签到失败'
								})
								setTimeout(() => {
									uni.hideLoading();
								}, 2000);
							}
						}else{
							uni.showLoading({
								title: '已签到'
							})
							setTimeout(() => {
								uni.hideLoading();
							}, 800);
						}
						
					}
				})
			},
			signCount(){
				// /user/sign/count
				uni.request({
					url:'/user/sign/count',
					method:'get',
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						console.log(`签到：`,obj)
						if(obj.data.success){
							this.count = obj.data.data
						}
					}
				})
			},
			blogOfMe(){
				let that = this;
				uni.request({
					url:'/blog/of/me',
					method:'get',
					data:{current:that.current},
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						console.log('笔记',obj)
						if(obj.data.success){
							that.myNotes = obj.data.data;
							console.log("myNotes",that.myNotes)
						}
					}
				})
			},
			// 跳转 用户个人主页
			userHome(){
				uni.navigateTo({
					url:'/pages/userHome/userHome'
				})
			},
			blogOfFollow(){
				uni.request({
					url:'/blog/of/follow',
					method:'get',
					data:{
						'lastId':this.lastId,
						'offset':this.offset
					},
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(val)=>{
						console.log("/blog/of/follow我关注的好友的笔记",val.data.data)
						this.dys = val.data.data
						this.lastId = val.data.data.minTime
						this.offset = val.data.data.offset
					}
				})
			}
		},
		onReachBottom(){
			console.log('上拉刷新')
			this.status = 'loading';
			uni.request({
				url:'/blog/of/follow',
				method:'get',
				data:{
					'lastId':this.lastId,
					'offset':this.offset
				},
				header:{
					'Accept':'*/*',
					'content-type': 'application/json;charset=utf-8',
					'Authorization':uni.getStorageSync('yystoken')
				} ,
				success:(val)=>{
					
					let dylistTwo = val.data.data;
					console.log("加载后获取的数据",dylistTwo)
					if(dylistTwo == undefined){
						this.status = 'nomore'
						return
					}
					this.dys.list =  this.dys.list.concat(dylistTwo.list)
					console.log('后-数据',this.dys)
					this.lastId = val.data.data.minTime
					this.offset = val.data.data.offset
				}
			})
		},
		components:{
			dynamic
		}
	}
</script>

<style lang="scss" scoped>
.uCenter{background: linear-gradient(134deg, #EDF6F0 0%, #DEEEE4 50%,#DCEDE2 100%);}
.uCenterTop{
	padding: 30rpx 30rpx 0;
	.uCenterTop_avatar{
		display: flex;
		justify-content: space-between;
		// filter: blur(50px);
		
		.lt{
			display: flex;
			.cot{
				padding-left: 20rpx;
			}
			.font35{
				color: #222222;
				font-size: 35rpx;
				margin: 20rpx 0 12rpx 0;
			}
			.font23{
				color: #666;
				font-size: 23rpx;
				margin-bottom: 15rpx;
			}
		}
		.rt{
		text-align: right;
		.setup{
			width: 46rpx;
			margin-right: 38rpx;
		}
		.msg{
			width: 42rpx;
		}
	}
	}
	.uCenterTop_box{
		margin: 17rpx 0 19rpx;
		display: flex;
		justify-content: space-around;
		text-align: center;
		.font42{
			font-weight: bold;
			color: #222222;
			font-size: 42rpx;
		}
		.font27{
			color: #666666;
			font-size: 27rpx;
		}
	}
	.signIn{
		background: linear-gradient(134deg, #239B5E 0%, #16843F 100%);
		padding: 23rpx 40rpx 10rpx;
		display: flex;
		justify-content:space-between;
		align-items: center;
		border-radius: 16rpx 16rpx 0 0;
		.font34{
			color: #FFFFFF;
			font-size: 34rpx;
			font-weight: bold;
			margin-bottom: 8rpx;
			.font38{
				font-size: 38rpx;
			}
		}
		.font23{
			color: #FFFFFF;
			font-size: 23rpx;
		}
		button{
			width: 206rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			color: #16843F;
			font-size: 31rpx;
		}
	}
}
.uCenterBom{
	background-color: #F5F7F6;
	border-radius: 20rpx 20rpx 0 0;
	padding: 20rpx 30rpx;
	.uCenterBom_tab{
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F0F0F0;
		text{
			font-size: 31rpx;
			color: #666;
			padding: 0 0 15rpx 0;
			margin-right: 60rpx;
			position: relative;
			&:last-child{
				margin-right: 0;
			}
			&.active{
				color: #222222;
				font-weight: bold;
				&::after{
					content: '';
					width: 38rpx;
					height: 8rpx;
					background: #16843F;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.uCenterBom_cont{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 24rpx;
		.list{
			background: #FFFFFF;
			border-radius: 15rpx;
			overflow: hidden;
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
			.imgs{
				width: 100%;
			}
			.conts{
				padding: 12rpx 15rpx;
				.font23{
					color: #252525;
					font-size: 23rpx;
					font-weight: bold;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
				.sec{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					.lt{
						display: flex;
						align-items: center;
						text{
							color: #666666;
							font-size: 19rpx;
							margin-left: 8rpx;
						}
					}
					.rt{
						text{
							color: #666666;
							font-size: 19rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
		}
	}
	
}
</style>
